
<template>
  <div class="articlelist">
    <!-- 下拉刷新===将整个van-list包裹 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <!-- ========= 上拉加载 =========-->
      <!-- vant组件库---【list列表】 -->
      <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="onLoad"
      >
     <van-cell v-for="item in list" :key="item.art_id" :title="item.title" >
     <!-- vant组件库---【cell单元格--自定义插槽--label】 -->
    <template #label>
      <!-- vant组件库---【grid宫格】 -->
      <!--  // 不是每个新闻文章列表都有图片 -->
      <van-grid  v-if="item.cover.images" :column-num="item.cover.images.length">
         <van-grid-item icon="photo-o" text="文字" v-for="img in item.cover.images" :key="img.index">
           <van-image
             :src="img"
           />
         </van-grid-item>
      </van-grid>
        <div class="meta">
        <span>{{ item.aut_name }}</span>
        <span>&nbsp;&nbsp;{{ item.comm_count }}评论</span>&nbsp;&nbsp;
        <span>{{ item.pubdate | relative }}</span>
        <!-- x 按钮 -->
        <span class="close">
          <van-icon name="cross" v-if="tokenInfo.token" @click="close(item.art_id)"></van-icon>
        </span>
      </div>
    </template>
  </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script>
import { reqgetArticleList } from '@/api/articlelist.js'
import { mapState } from 'vuex'
export default {
  name: 'Articlelist',
  props: {
    channel: {
      style: Object,
      required: true
    }
  },
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      timestamp: null,
      isLoading: false
    }
  },
  computed: {
    ...mapState('user', ['tokenInfo'])
  },

  created () {
    // 删除对应文章 【一进页面就监听】
    this.$eventBus.$on('delArticelList', (obj) => {
      const { channellistId, articleId } = obj
      if (channellistId !== this.channel.id) return
      // 在list中找到文章id为articleId的元素, 并删除
      this.list = this.list.filter(item => item.art_id !== articleId)
    })
    // 举报对应文章
    this.$eventBus.$on('reportArticle', (obj) => {
      const { articleId, channellistId } = obj
      if (channellistId !== this.channel.id) return
      this.list = this.list.filter(item => item.art_id !== articleId)
    })
  },
  methods: {
    //  <!-- 上拉加载 -->
    async onLoad () {
      // 若时间戳（之前）的刷完了，则给最新的数据
      if (!this.timestamp) {
        this.timestamp = +new Date()
      }
      const res = await reqgetArticleList(this.channel.id, this.timestamp)
      // console.log(res)
      // 存之前的时间戳
      this.timestamp = res.data.pre_timestamp
      // 追加不是覆盖
      // this.list = [...this.list, ...res.data.results]
      this.list.push(...res.data.results)
      this.loading = false

      // 若没有数据了，要显示‘没有更多了’
      if (res.data.results.length === 0) {
        this.finished = true
      }
    },
    //  <!-- 下拉刷新===获取最新数据 -->
    async onRefresh () {
      const res = await reqgetArticleList(this.channel.id, +new Date())
      console.log(res)
      // 最新数据刷完后，往下滑懂，就需要之前的数据
      this.timestamp = res.data.pre_timestamp
      // !刷新==>直接覆盖，否则会一直重复新数据
      this.list = res.data.results
      this.$toast('刷新成功')
      this.isLoading = false
    },
    // x 按钮
    close (id) {
      this.$emit('closePop', id)
    }

  }
}

</script>

<style lang='scss' scoped>
.articlelist{
.meta{
  margin-right: 15px;
   .close{
      float: right;
      margin-top: 4px;
    }
}
}

</style>
